<template>
  <div class="house">
    <div class="item" @click="$router.push(`detail/${item.houseCode}`)">
      <div class="left">
      <img :src="item.houseImg" alt="">
    </div>
    <div class="right">

      <p class="p1">{{item.title}}</p>
      <p class="p2">{{item.desc}}</p>
      <span class="p3">{{item.tags.join('/')}}</span>
      <p class="p4">{{item.price}} <span>元/月</span></p>
    </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => ({})
    }
  },
  name: 'house-item'

}
</script>

<style lang='less' scoped>
* {
  margin: 0;
  padding: 0;
}
.house {
  padding: 10px 15px;
  .item {
    display: flex;
    align-items: center;
    // margin-top: 50px;

    border-bottom: 1px solid #ccc;
    .left{
      margin-right: 20px;
    img {
      width: 105px;
      height: 80px;
    }
  }
  .right {
    .p1 {
      margin-bottom: 3px;
      font-size: 16px;
      font-weight: 600;
    }
    .p2 {
      margin-bottom: 3px;
      font-size: 12px;
      color: #ccc;
    }
    .p3 {
      display: inline-block;
      margin-bottom: 3px;
      padding: 3px,5px;
      height: 16px;
      font-size: 12px;
      text-align: center;
      background-color: skyblue;
      color: aqua;
    }
    .p4{
      color: orangered;
      span{
        font-size: 12px;
        color: orange;
      }
    }
  }
  }

}
</style>
